<template>
  <div di="groups" style="font-size: 14px;margin-bottom: 50px;">
    <div class="administrators-left">
     <div class="administrators-left-groups">
       <div class="left-group" v-for="i in allgroups.list" :key="i.id" :class="{checktapstyle: checktapmsg === i.alias}" @click="checkedtap(i)">
         <span class="left-group-title">{{ i.alias }}</span>
         <span class="left-group-but" v-show="checktapmsg === i.alias && checktapid !== 1">
           <span style="margin-right: 4px" @click="modifyGroup(i)">修改</span>
           <span @click="delGroup(i.id)">删除</span>
           <div class="clear"></div>
         </span>
         <div class="clear"></div>
       </div>
       <div class="clear"></div>
       <div v-show="addShow" class="addinput">
         <input v-model="newgroup"/>
         <span style="margin-left: 1%">
           <span class="addsure-style" @click="addSure">确定</span>
           <span @click="addCancel" style="cursor: pointer">取消</span>
         </span>
       </div>
       <div class="addgroup-style" @click="addgroups" v-show="addbutShow">
         + 添加管理组
       </div>
     </div>
    </div>
    <div class="administrators-right">
      <div class="administrators-right-title">
        <span v-for="ob in setobject" :key="ob.id">{{ ob.name }}</span>
        <div style="float: right;margin-top: -24px">
          <!--<div style="cursor: pointer;margin-right: 8px" @click="goGroup(checktapid)">-->
            <!--<i class="iconfont icon-geren"></i>-->
            <!--查看组成员-->
          <!--</div>-->
          <div class="checkallStyle" v-show="checktapmsg !== '超级管理员'"><label><input v-model="checkAuthAllmsg" type="checkbox" @click="checkAuthAll"/>全选</label></div>
        </div>
      </div>

      <div class="administrators-right-cont">
        <div v-show="checktapmsg !== '超级管理员'">
          <div v-for="v in acos" :key="v.id" style="border-bottom: 1px solid #cccccc;padding-bottom: 18px">
            <h3 style="width: 17.5%;float: left;margin-top: 20px">{{ v.alias }}</h3>
            <ul style="width: 80%;float:left;margin-top: 10px;" v-if="v.children">
              <li v-for="f in v.children" :key="f.id" style="float: left;margin-left: 20px;margin-top: 10px">
              <span>
                <label><input type="checkbox" id="checked" v-model="checkAuthOne" :value="f.id"/>{{ f.alias }}&nbsp;&nbsp;</label>
              </span>
              </li>
            </ul>
            <div class="clear"></div>
          </div>
          <div class="groups-save">
            <el-button type="info" size="medium" @click="postauth">保  存</el-button>
          </div>
        </div>
        <!--<div v-show="checktapmsg === '超级管理员'" style="text-align: center;margin-top: 80px;font-size: 18px;font-weight: bold">-->
          <!--超级管理员不能更改权限-->
        <!--</div>-->
      </div>
    </div>
    <div class="clear"></div>
    <div class="layer" v-show="modifyshow">
      <div class="mask" @click="modifyshow = false"></div>
      <div class="content">
        <span class="close" @click="modifyshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">修改管理组名</p>
        <div class="doit">
          <div class="one">
            <span style="margin-right: 20px">旧管理组名</span>{{ modifyOldAlias }}
          </div>
          <div class="one">
            <span>新管理组名</span><el-input size="mini" v-model="modifyNewgroup"></el-input>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="suremodifyGroup">修改</el-button>
            <el-button size="mini" @click="modifyshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import g from '@/common/g.js'
import store from '@/store'

export default {
  name: 'groups',
  store: store,
  data () {
    return {
      setobject: [
        {
          id: 1,
          name: '操作对象'
        },
        {
          id: 2,
          name: '权限'
        }
      ],
      checkedAuth: [],
      checked2: false,
      addShow: false,
      addbutShow: true,
      newgroup: '',
      allgroups: {},
      modifyshow: false,
      modifyOldAlias: '',
      modifyOldId: '',
      modifyNewgroup: '',
      acos: {},
      checktapmsg: '超级管理员',
      checkAuthOne: [],
      checkAuthAllmsg: false,
      checktapid: 1,
      quanxian: []
    }
  },
  watch: {
    checkAuthOne () {
      console.log(this.checkAuthOne)
    }
  },
  mounted () {
    this.getGroups()
    this.getAllAuth()
  },
  methods: {
    addgroups () {
      this.addShow = true
      this.addbutShow = false
    },
    addCancel () {
      this.addShow = false
      this.addbutShow = true
    },
    /* 新增管理组 */
    addSure () {
      let that = this
      if (this.newgroup !== '') {
        that.checkedAuth = []
        g.ajax({
          method: 'post',
          path: 'userAros/add',
          data: {
            alias: that.newgroup,
            acos: that.checkedAuth
          },
          cbSuccess: function (data) {
            that.$message.success('新增成功')
            that.addShow = false
            that.addbutShow = true
            that.getGroups()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else {
        this.$message.error('管理组名不能为空')
      }
    },
    /* 获取管理组 */
    getGroups () {
      let that = this
      g.ajax({
        method: 'post',
        path: 'userAros/index',
        data: {
          type: 'allowed'
        },
        cbSuccess: function (data) {
          that.allgroups = data.memo
          that.checktapmsg = data.memo.list[0].alias
          that.checkAuthOne = []
          that.checktapid = data.memo.list[0].id
          that.checkAuthAllmsg = false
          that.checkAuthOne = JSON.parse(JSON.stringify(that.allgroups.list[0].acos))
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    /* 删除管理组 */
    delGroup (id) {
      let that = this
      g.ajax({
        method: 'get',
        path: 'userAros/delete/' + id,
        cbSuccess: function (data) {
          that.$message.success('删除成功')
          that.getGroups()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    /* 修改管理组 */
    modifyGroup (group) {
      this.modifyshow = true
      this.modifyOldId = group.id
      this.modifyOldAlias = group.alias
    },
    suremodifyGroup () {
      let that = this
      g.ajax({
        method: 'post',
        path: 'userAros/update/' + this.modifyOldId,
        data: {
          alias: this.modifyNewgroup,
          acos: this.checkedAuth,
          type: 'allowed'
        },
        cbSuccess: function (data) {
          that.$message.success('修改成功')
          that.modifyshow = false
          that.getGroups()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    /* 获取所有权限 */
    getAllAuth () {
      let that = this
      g.ajax({
        method: 'get',
        path: 'userAcos/index/',
        cbSuccess: function (data) {
          console.log(data)
          for (let i in data.memo) {
            let v = data.memo[i]
            if (v.parent_id === 0) {
              v.children = []
              that.$set(that.acos, v.id, v)
            } else {
              that.acos[v.parent_id]['children'].push(v)
            }
          }
          console.log(that.acos)
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    checkedtap (check) {
      this.checkAuthOne = []
      this.checktapmsg = check.alias
      this.checktapid = check.id
      this.checkAuthAllmsg = false
      for (let i in this.allgroups.list) {
        if (this.allgroups.list[i].id === check.id) {
          this.checkAuthOne = JSON.parse(JSON.stringify(this.allgroups.list[i].acos))
        }
      }
    },
    /* 全选 */
    checkAuthAll () {
      if (this.checkAuthAllmsg === false) {
        for (let i in this.acos) {
          for (let a in this.acos[i].children) {
            if (this.checkAuthOne.indexOf(this.acos[i].children[a].id) < 0) {
              this.checkAuthOne.push(this.acos[i].children[a].id)
            }
          }
        }
      } else {
        this.checkAuthOne = []
      }
    },
    /* 提交更改权限 */
    postauth () {
      this.quanxian = this.checkAuthOne
      if (this.checkAuthOne.length !== 0) {
        let that = this
        g.ajax({
          method: 'post',
          path: 'userAros/update/' + this.checktapid,
          data: {
            acos: this.quanxian,
            type: 'allowed'
          },
          cbSuccess: function (data) {
            that.$message.success('保存成功')
            that.getGroups()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else {
        this.$message.error('请选取权限')
      }
    }
    // goGroup (id) {
    //   this.$router.push({
    //     path: '/admins/index',
    //     query: {
    //       id: id,
    //       alias: this.checktapmsg
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .administrators-left{
    float: left;
    border: 1px solid #f0f0f0;
    width: 20%;
    min-height: 900px;
    font-size: 16px;
  }
  .administrators-left-top{
    padding-left: 12px;
    height: 46px;
    line-height: 46px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #cccccc;
    cursor: pointer;
  }
  .checktapstyle{
    background-color: #cccccc;
    color: #ffffff
  }
  .administrators-left-groups{
    background-color: #f0f0f0;
    min-height: 900px;
    font-size: 14px;
  }
  .left-group{
    border-bottom: 1px solid #cccccc;
    padding-left: 12px;
    height: 46px;
    cursor: pointer;
  }
  .left-group-title{
    display: inline-block;
    width: 61%;
    margin:13px 0;
    float: left
  }
  .addgroup-style{
    margin: 20px 0 0 10px;
    padding-bottom: 10px;
    font-weight: bold;
    cursor: pointer
  }
  .left-group-but{
    font-size: 12px;
    font-weight: bold;
    float: right;
    margin:14px 10px 14px 0;
    color: #383838;
  }
  .administrators-right{
    float: left;
    width: 79%;
    min-height: 900px;
    border: 1px solid #cccccc;
  }
  .administrators-right-title{
    border-bottom: 1px solid #cccccc;
    padding-top: 30px;
    padding-left: 10px;
    span{
      margin-right: 13%;
      color: #cccccc;
    }
  }
  .administrators-right-cont{
    padding: 10px;
    input{
      position: relative;
      top: 1px;
      cursor: pointer;
    }
    label{
      cursor: pointer;
    }
  }
  .groups-save{
    margin-top: 20px;
    text-align: center;
  }
  .addinput{
    border-bottom: 1px solid #cccccc;
    height: 45px;
    margin-top: 20px;
    input{
      padding-left: 6px;
      width: 56%;
      margin-left: 10px;
    }
  }
  .addsure-style{
    margin-right: 4px;
    margin-left: 5px;
    cursor: pointer
  }
  .alldisabledStyle{
    color: #cccccc;
  }
  .layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
    .content {
      position: relative;
      width: 300px;
      background: #fff;
      margin: 10% auto;
      z-index: 2;
      padding: 30px;
      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }
      .title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }
      .doit .one .el-input {
        width: 200px;
        margin-left: 20px;
      }
      .doit .one {
        margin-top: 20px;
        font-size: 14px;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        position: relative;
        left: -4px;
      }
      .buttons {
        margin-top: 20px;
        text-align: center;
        button {
          margin: 0 20px;
        }
      }
    }
  }
  .checkallStyle{
    float: right;
    margin-right: 8px;
    margin-top: 2px;
    input{
      cursor: pointer;
    }
    label{
      cursor: pointer;
    }
  }
</style>
